// 首先需要整体页面加载完毕之后再运行Js  load
// 1、获取元素  委托来做
// 2、利用定时器来控制图片滚动
// 3、图片动，小圆点也跟着动
// 4、手指触摸滑动图片跟着手指动

window.addEventListener('load', function () {
    // 1、获取元素  委托来做
    var focus = document.querySelector('.focus');
    // ul是focus的第一个儿子
    var ul = focus.children[0];
    // 获得focus 的宽度
    var w = focus.offsetWidth;
    // ol是focus的第二个儿子
    var ol = focus.children[1];


    // 2、利用定时器来控制图片滚动,使用translatex
    // 每隔两秒钟自动往左移动focus图片的距离
    // 声明一个变量，来控制图片
    var index = 0;
    var timer = setInterval(function () {
        // 定时器每运行一次，index加一
        index++;
        // 每次移动的距离等于index*focus的宽度
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000)

    // 这里当index=3之后，会一直过渡空的部分，所以需要给ul添加过渡完成后的监听事件
    ul.addEventListener('transitionend', function () {
        // 当index》=3的时候，给index重新赋值为0，这时候新赋值的index需要继续移动
        if (index >= 3) {
            index = 0;
            // 重新赋值的过程ul需要隐藏
            ul.style.display = 'none';
            // 这时候index有了新的赋值，还需要每次移动得宽度就可以发生移动
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';

        } else if (index < 0) {
            // 这里为什么是2
            index = 2;
            // 注意这里是ul的过渡隐藏
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 3、图片动，小圆点也跟着动
        // 把ol里面li带有current类名的选取出来去掉类名 remove

        // 选取                       去掉类名 remove
        ol.querySelector('.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current   add  
        // 用控制图片的index索引来找到当前移动到的ol里面的是第几个孩子
        ol.children[index].classList.add('current');

    })


    // 4、手指触摸滑动图片跟着手指动
    // 首先声明刚开始触摸，触摸后的手指坐标
    // 声明滑动前focus的坐标，
    // 因为后面要用到，所以声明在外面
    var startX = 0;
    var moveX = 0;
    // 这里声明movex在外面是为了后面判断向左滑还是向右滑动
    //   这里不需要声明x,因为上面已经有一个ul的位置值了
    ul.addEventListener('touchstart', function (e) {
        // 第一个手指头开始触摸时候的坐标
        startX = e.targetTouches[0].pageX;
        // 当手指触摸上去的时候停止定时器
        clearInterval(timer);


    })
    ul.addEventListener('touchmove', function (e) {
        // 第一个手指头开始触摸时候的坐标
        // 手指移动的距离等于移动后的位置减去移动前的位置
      moveX = e.targetTouches[0].pageX - startX;
        // 声明一个变量来放图片移动的距离
        var translatex = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translate(' + translatex + 'px)'
        // 阻止屏幕滚动行为，防止触摸元素的时候拖动整个页面滑动
        e.preventDefault();

    })
    // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
    ul.addEventListener('touchend', function () {
        // 当手指离开的一瞬间判断往左划还是向右滑动，向左滑moveX的值为负；向右滑动moveX的值为正
        // 当手指松开时候拖动了向右滑超过50，则向右滑动
        // 因为这里movex有可能是负值，所以需要取绝对值再判断松开后是向左还是向右
        // (1) 如果移动距离大于50像素我们就播放上一张或者下一张
        if (Math.abs(moveX) > 50) {
            // 如果是右滑就是 播放上一张 moveX 是正值
            if (moveX > 0) {
                index--;
            } else {
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else {
            var translatex = -index * w;
            ul.style.transition = 'all .1s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 手指离开的时候就重新开启定时器
        // 重新开启之前先清除之前的定时器
        clearInterval(timer);
        timer = setInterval(function () {
            // 定时器每运行一次，index加一
            index++;
            // 每次移动的距离等于index*focus的宽度
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';

        }, 2000)

    })
    // 鼠标离开时间结束之后
    var goBack = document.querySelector('.goBack');
    var nav=document.querySelector('nav')
    // 当页面滚动到一定位置时候，goBack显示出来，其他时候隐藏
    window.addEventListener('scroll', function () {
        if (window.pageYOffset>=nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    }) 


    // 点击  goBack时候页面回到顶部
    
    goBack.addEventListener('click', function () {
        window.scroll(0, 0);
    })




// 没有添加flag




})


